<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Selectable Database Table</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='1.css') }}">
    <style>
        .selectable-row {
            cursor: pointer;
        }

        .selected {
            background-color: #cce5ff; /* Highlight color when selected */
        }
    </style>
</head>
<body>

<div class="container mt-5">
    <div class="form-group">
        <button type="button" class="btn btn-primary mt-2" id="redirectButton">标准化</button>
    </div>

    <div class="form-group">
        <button type="button" class="btn btn-primary mt-2" id="ykfyydsButton">处理</button>
    </div>

    <div class="form-group">
        <label for="igsdmInput">Enter IGSDM:</label>
        <input type="text" class="form-control" id="igsdmInput" placeholder="Enter IGSDM">
        <button type="button" class="btn btn-primary mt-2" id="searchButton">Search</button>
    </div>

    <!-- 添加一个新的用于搜索XXLY的输入框 -->
    <div class="form-group">
        <label for="xxlyInput">输入 XXLY：</label>
        <input type="text" class="form-control" id="xxlyInput" placeholder="输入 XXLY">
        <button type="button" class="btn btn-primary mt-2" id="searchByXXLYButton">按XXLY搜索</button>
    </div>

    <!-- 添加搜索全部按钮 -->
    <div class="form-group">
        <button type="button" class="btn btn-primary mt-2" id="searchAllButton">搜索全部</button>
    </div>

    <div class="form-group">
        <button type="button" class="btn btn-primary mt-2" id="downloadButton">下载选中行</button>
    </div>

    <table class="table table-bordered">
        <thead>
        <tr>
            <!-- 根据你的数据库表格列名修改这里 -->
            <th>ID</th>
            <th>IGSDM</th>
            <th>XXBT</th>
            <th>XXFBRQ</th>
            <th>JZRQ</th>
            <th>GGLJ</th>
            <!-- ... 添加更多列 ... -->
        </tr>
        </thead>
        <tbody>
        {% for row in data %}
        <tr class="selectable-row">
            <!-- 根据你的数据库表格列的顺序修改这里 -->
            <td>{{ row[0] }}</td>
            <td>{{ row[1] }}</td>
            <td>{{ row[2] }}</td>
            <td>{{ row[3] }}</td>
            <td>{{ row[4] }}</td>
            <td>{{ row[5] }}</td>

            <!-- ... 添加更多列 ... -->
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>

<script>
$(window).on('load', function () {
        console.log("文档已准备好！");
        var isDragging = false;
        var startRow;

        // 添加点击事件监听器到新的按XXLY搜索的按钮
         $("#searchByXXLYButton").click(function () {
        // 调用searchByXXLY函数
        searchByXXLY();
    });


        // 添加鼠标按下事件监听器到表格行，使用事件代理
       $("tbody").on("mousedown", ".selectable-row", function (e) {
        isDragging = true;
        startRow = this;
        // 切换 'selected' 类
        $(this).toggleClass("selected");
        e.preventDefault(); // 防止选中文本
    });


        // 添加鼠标滑动事件监听器到表格行
       $("tbody").on("mousemove", ".selectable-row", function () {
        if (isDragging) {
            $(this).addClass("selected");
        }
    });


    $(document).on("mouseup", function () {
        if (isDragging) {
            isDragging = false;
        }
    });
    $(document).ready(function () {
        // ... (your existing code)

        // 添加点击事件监听器到跳转按钮
        $("#ykfyydsButton").click(function () {
            redirectToYkfyyds();
        });
    });

    function redirectToYkfyyds() {
        // Specify the URL of ykfyyds.html
        var ykfyydsUrl = "chuli.html";

        // Redirect to the specified URL
        window.location.href = ykfyydsUrl;
    }

     $("tbody").on("mouseleave", ".selectable-row", function () {
        if (isDragging) {
            isDragging = false;
        }
    });

        // 添加点击事件监听器到主搜索按钮
        $("#searchButton").click(function () {
            // 调用searchByIGSDM函数
            searchByIGSDM();
        });

        // 添加点击事件监听器到搜索全部按钮
        $("#searchAllButton").click(function () {
            // 调用searchAll函数
            searchAll();
        });

        // 添加点击事件监听器到下载按钮
        $("#downloadButton").click(function () {
            // 调用downloadSelected函数
            downloadSelected();
        });
    });

    function searchByXXLY() {
        var xxlyValue = $("#xxlyInput").val();

        // 使用Ajax请求向后端发送XXLY值
        $.ajax({
            type: "POST",
            url: "",
            data: { xxlyInput: xxlyValue },
            success: function (data) {
                // 更新表格数据
                updateTable(data);
                console.log("按钮点击！XXLY值:", xxlyValue);
            },
            error: function () {
                alert("查询失败！");
            }
        });
    }

    function searchByIGSDM() {
        var igsdmValue = $("#igsdmInput").val();

        // 使用Ajax请求向后端发送IGSDM值
        $.ajax({
            type: "POST",
            url: "",
            data: { igsdmInput: igsdmValue },
            success: function (data) {
                // 更新表格数据
                updateTable(data);
                console.log("按钮点击！IGSDM值:", igsdmValue);
            },
            error: function () {
                alert("查询失败！");
            }
        });
    }

    function searchAll() {
        var igsdmValue = $("#igsdmInput").val();
        var xxlyValue = $("#xxlyInput").val();

        // 使用Ajax请求向后端发送 IGSDM 和 XXLY 值
        $.ajax({
            type: "POST",
            url: "",
            data: {
                igsdmInput: igsdmValue,
                xxlyInput: xxlyValue,
                searchAll: true
            },
            success: function (data) {
                // 更新表格数据
                updateTable(data);
                console.log("搜索全部按钮点击！");
            },
            error: function () {
                alert("查询失败！");
            }
        });
    }

function updateTable(data) {

    // 清空表格
    $("tbody").empty();
    // 遍历新的数据，更新表格
    for (var i = 0; i < data.length; i++) {
        var row = data[i];
        console.log(row)
        var newRow = "<tr class='selectable-row'>" +
            "<td>" + row['ID'] + "</td>" +
            "<td>" + row['IGSDM'] + "</td>" +
            "<td>" + row['XXBT'] + "</td>" +
            "<td>" + row['XXFBRQ'] + "</td>" +
            "<td>" + row['JZRQ'] + "</td>" +
            "<td>" + row['GGLJ'] + "</td>" +

            "</tr>";
        $("tbody").append(newRow);
    }
}

function downloadSelected() {
    var selectedRows = [];
    $(".selectable-row.selected").each(function () {
        var row = [];
        $(this).find("td").each(function () {
            row.push($(this).text());
        });
        selectedRows.push(row);
    });

    if (selectedRows.length > 0) {
        var selectedData = encodeURIComponent(JSON.stringify(selectedRows));
        var downloadUrl = "download.html?data=" + selectedData;
        window.location.href = downloadUrl;
    } else {
        alert("请先选择要下载的行。");
    }
}
$("tbody").on("dblclick", ".selectable-row", function () {
        var ggljValue = $(this).find("td:eq(5)").text();
        openFile(ggljValue);
    });

    function openFile(ggljValue) {
        window.open(ggljValue, "_blank");

    }
    $("#redirectButton").click(function () {
        redirectToBiaozh();
    });

    function redirectToBiaozh() {
        // Specify the URL of Biaozh.html
        var biaozhUrl = "Biaozh";

        // Redirect to the specified URL
        window.location.href = biaozhUrl;
    }
</script>

</body>
</html>